<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb class="mb-1" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table
      :highlight-current-row="true"
      stripe
      border
      :data="userlist.userdata"
    >
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="username"> </el-table-column>
      <el-table-column label="邮箱" prop="email"> </el-table-column>
      <el-table-column label="电话" prop="mobile"> </el-table-column>
      <el-table-column label="角色" prop="role_name"> </el-table-column>
      <!-- <el-table-column label="状态" prop="userlist.userdata.mg_state">
      <template slot-scope="userlist">
        <el-switch v-model="userlist.userdata.mg_state"  active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { user } from "@/utils/api";
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const users = reactive({
      query: "",
      pagenum: 1,
      pagesize: 10,
    });

    const userlist = reactive({
      userdata: [],
    });
    const getdata = async () => {
      const { data: res } = await user(users);
      if (res.meta.status !== 200) {
        ElMessage.error({
          message: "数据请求失败",
        });
      } else {
        console.log(res.data.users);
        userlist.userdata = res.data.users;
        console.log(userlist.userdata);
      }
    };
    getdata();
    return {
      userlist,
    };
  },
};
</script> 

<style>
.el-table {
  cursor: pointer;
}
</style>